<!-- Copyright 2021 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->
<style>

#lessonContainer {
  margin: auto;
  text-align: start;
  width: 800px;
}

</style>

<div id="lessonContainer"
    hidden$="[[ shouldHideLessonContainer_(activeScreen) ]]">

  <!-- Use lessonData object to create all lessons -->
  <template id="lessonTemplate" is="dom-repeat" items="[[ lessonData ]]"
      as="lesson" index-as="index">
    <tutorial-lesson
    lesson-id="[[ index ]]"
    title="[[ lesson.title ]]"
    content="[[ lesson.content ]]"
    medium="[[ lesson.medium ]]"
    curriculums="[[ lesson.curriculums ]]"
    practice-title="[[ lesson.practiceTitle ]]"
    practice-instructions="[[ lesson.practiceInstructions ]]"
    practice-file="[[ lesson.practiceFile ]]"
    practice-state="[[ lesson.practiceState ]]"
    events="[[ lesson.events ]]"
    actions="[[ lesson.actions ]]"
    auto-interactive="[[ lesson.autoInteractive ]]"
    active-lesson-id="[[ activeLessonId ]]">
    </tutorial-lesson>
  </template>
</div>
